<style rel="stylesheet/scss" lang="scss" scoped>
    .vin-con {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		.vin-con_cal{
			width: 100%;
			display: flex;
			padding: 0 10px;
			flex-direction: column;
			border: 1px solid #E5E5E5;
			>p{
				width: 100%;
				height: 40px;
				line-height: 40px;
			}
			.cal-up{
				flex: 1;
				display: flex;
				padding: 30px 0;
				.cal-up_amount{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-right:1px solid #E5E5E5;
					>div:first-child{
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
					.amount-li{
						width: 100%;
						height: 60px;
						display: flex;
						justify-content: center;
						align-items: center;
						>span{
							display: inline-block;
							padding: 10px 20px;
							font-size: 14px;
							color: #fff;
							cursor: pointer;
							background: #409EFF;
							text-align: center;
							border-radius: 5px;
							margin: 0 10px;
							>font{
								color: yellow;
							}
						}
					}
				}
				.cal-up_number{
					width: 300px;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
				}
			}
		}
		.text-30{
			font-size: 30px;
			margin-bottom: 10px;
		}
    }
</style>
<template>
    <div class="vin-con">
        <div class="vin-con_cal">
			<p>查询统计</p>
			<div class="cal-up">
				<div class="cal-up_amount">
					<div>
						<span class="text-red text-30">{{remainNum}}</span>
						<span>剩余查询次数</span>
					</div>
					<div class="amount-li" v-if="regList && regList.length>0">
						<span v-for="(item, index) in regList" @click="getPayFn(item)">充值{{item.rule.price}}次 /<font>￥{{item.rule.count}}</font></span>
					</div>
				</div>
				<div class="cal-up_number">
					<span class=" text-30">{{searchNum}}</span>
					<span>累计查询次数</span>
				</div>
			</div>
		</div>
		<!--支付充值公用模块-->
		<pay v-if="showPay" :pay-params="payParams" @closePay="closePay"></pay>
    </div>
</template>
<script>
	import {
		getToken
	} from '@/utils/auth'
	// 成功常量 200
	import {
		SUCCESS_REQUEST_STATUS
	} from '@/utils/config.js'
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	// 公用支付模块
    import pay from '@/components/pay/pay.vue'

    export default {
        data() {
            return {
				regList: [],			// 充值金额数组
				packageId: '',			// 充值金额方案Id
				showPay: false,			// 是否显示支付模块
				payParams: {},			// 支付模块需要的参数
				merchantUserId: '',		// 商家id
				remainNum: 0,			// 剩余查询次数
				searchNum: 0			// 累计查询次数
			}
        },
		methods: {
			_initPayData() {
				//window.sessionStorage.getItem('merchantId') vin/query/statistics/52/
				this.$get({
					url: `vin/query/statistics/${window.sessionStorage.getItem('merchantId')}/`, 
					callback:res => {
						console.log(res)
						if(res.status === 200) {
							
							this.remainNum = res.data.remainVinQueryCount
							this.searchNum = res.data.totalVinQueryCount
							res.data.rules.forEach((item) => {
								item.rule = JSON.parse(item.rule)
							})
							this.regList = res.data.rules
						}else {
							this.$message({
								type:'error',
								message: res.msg
							})
						}
					}
				})
//				this.$ajax({
//					api:'merchant/transaction/getRechargePackageList',
//					params: {
//						token: getToken(),
//						merchantUserId: this.merchantUserId
//							
//					}
//				}).then(res => {
//					console.log(res)
//					if(res.status === SUCCESS_REQUEST_STATUS) {
//						this.remainNum = res.data.remainNum
//						this.searchNum = res.data.searchNum
//						this.regList = res.data.rechargePackageList
//					}
//				}).catch(err => {
//					this.$message({
//						type: 'error',
//						message: err.message
//					})
//				})
			},
			/**
			 * @desc 点击充值金额进行充值
			 * @param item 点击当前充值金额
			 */
			getPayFn(item) {
				this.showPay = true
				this.payParams = {packageId: item.id ,merchantId: window.sessionStorage.getItem('merchantId'), token: getToken(),amount: item.rule.price}
			},
			/**
			* @desc 关闭支付充值模块
			*/
			closePay() {
				this.showPay = false
				this._initPayData()
			}
		},
		created:function(){
			this.merchantUserId = window.localStorage.getItem('merchantUserId') ? window.localStorage.getItem('merchantUserId') : ''
		},
		mounted() {
			// 初始化数据
			this._initPayData()
		},
		components:{
			pay
		}
		
    }
</script>
